import React, { useState } from 'react';
import './NewContentCard.css';
import { ClockCircleOutlined, EyeOutlined, StarFilled, StarOutlined } from '@ant-design/icons';

interface NewContentCardProps {
  data: {
    title: string;
    description: string;
    date: string;
    views: string;
    likes: string;
    comments: number;
    downloads: string;
    shares: string;
    username: string;
    favorites: string;
    tags: string[];
    image: string;
    link: string;
  };
}

const NewContentCard: React.FC<NewContentCardProps> = ({ data }) => {
  const [collected, setCollected] = useState(false);
  return (
    <div className="new-card">
      <div className="new-card-header">
        <h2 className="new-card-title">{data.title}</h2>
        <div className="new-card-favorites">
        <span onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', padding:'0.0625rem 0.3125rem',color: '#81838f', fontSize: '1.125rem'}}>
            {collected ? <StarFilled style={{ color: 'gold', fontSize: '1.125rem', marginRight: '0.125rem' }} /> : <StarOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} />} {data.favorites}
          </span>
        </div>
        <button className="new-card-download-button">下载数据集</button>
      </div>
      <div className="new-card-meta-info">
        <img src={data.image} alt={data.username} />
        <span style={{marginLeft:'-0.5%'}}>{data.username}</span>
        <span className="separator">|</span>
        <span><img src="/硬盘1.png" alt="硬盘" /> {data.downloads}</span>
        <span className="separator">|</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', color: 'black', fontSize: '1.125rem'}}>
            <EyeOutlined style={{ fontSize: '1.125rem', marginRight: '0.5rem' }} /> {data.views}
          </span>
        <span className="separator">|</span>
        <span><img src="/下载1.png" alt="浏览量" style={{marginBottom:'0.25rem',width: '1rem', height: '1rem'}}/> {data.likes}</span>
        <span className="separator">|</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', color: 'black', fontSize: '1.125rem'}}>
            <ClockCircleOutlined style={{ fontSize: '1.125rem', marginRight: '0.5rem' }} /> {data.date}
          </span>
      </div>
      <div className="new-card-tags">
        {data.tags.map((tag, index) => (
          <span key={index} className="new-card-tag">
            {tag}
          </span>
        ))}
      </div>
    </div>
  );
};

export default NewContentCard;
